<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
</head>
<body>
    <h1>AlloyUI - Video</h1>
    <div id="container">
        <div id="demo"></div>
        <br>
        <a href="#" class="btn btn-success" id="play-btn">
            <span class="glyphicon glyphicon-play"></span> Play
        </a>
        <a href="#" class="btn btn-danger" id="pause-btn">
            <span class="glyphicon glyphicon-pause"></span> Pause
        </a>
        <a href="#" class="btn btn-info" id="change-video-btn">
            <span class="glyphicon glyphicon-film"></span> Change video
        </a>
    </div>
    <script>
    YUI({ filter:'raw' }).use('aui-video', function(Y) {

        var video = new Y.Video({
            boundingBox: '#demo',
            width: 640,
            height: 368,
            url: 'http://videos.liferay.com/webinars/2010-08-11.mp4',
            ogvUrl: 'http://videos.liferay.com/webinars/2010-08-11.ogv',
            swfUrl: 'http://videos.liferay.com/common/player.swf',
            poster: 'assets/sample-jpg.jpg',
            fixedAttributes: {
                allowfullscreen: 'true'
            }
        }).render();

        video.after('play', function() {
            Y.log('play');
        });

        video.after('pause', function() {
            Y.log('pause');
        });

        Y.one('#play-btn').on('click', function(e) {
            e.preventDefault();

            video.play();
        });

        Y.one('#pause-btn').on('click', function(e) {
            e.preventDefault();

            video.pause();
        });

        Y.one('#change-video-btn').on('click', function(e) {
            e.preventDefault();

            video.pause();
            video.set('ogvUrl', 'assets/movie.ogv');
            video.set('url', 'assets/movie.mp4');
            video.load();
            video.play();
        });

    });
    </script>
</body>
</html>